import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import { Row, Col, Spin, Card } from "antd";
import Upload from "../../../components/Upload";
import DescriptionList from '../../../components/DescriptionList';
import styles from '../../Pbulic.less';

const { Description } = DescriptionList;

@connect(({equipment_spares,global }) => ({
  dictionaries:global.dictionaries,
  baseUrl:global.baseUrl,
  detaildata:equipment_spares.detaildata,
  loading:equipment_spares.loading.detailinfo,
}))
export default class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.detailInfoId = this.props.match.params.id && this.props.match.params.id!='detail' ? this.props.match.params.id : 0;
  }

  componentDidMount() {
    const { dispatch} = this.props;
    dispatch({
      type: "equipment_spares/fetch_spares_info",
      payload: {
        attaId: this.detailInfoId
      }
    });
  }




  render() {
    const { detaildata,loading, dictionaries, baseUrl } = this.props;
    const attaType = dictionaries.deviceType && dictionaries.deviceType.length>1
      ? dictionaries.deviceType.map(item=>item.label)
      :[];

    const attaLife = dictionaries.deviceLife && dictionaries.deviceLife.length>1
      ? dictionaries.deviceLife.map(item=>item.label)
      :[];


    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata && detaildata.attaId &&
          <Card>
            <Row gutter={24}>
              <Col span={4} className={styles.detail_info_pic}>
                {
                  detaildata.attaPhoto && detaildata.attaPhoto.url &&
                  <Upload
                    listType="picture-card"
                    fileList={[{uid:1,url:`${baseUrl}${detaildata.attaPhoto.url}`}]}
                    disabled={true}

                  />
                }
                {
                  (!detaildata.attaPhoto || !detaildata.attaPhoto.url) &&
                  <div className={styles.no_pic} >暂无图片</div>
                }
              </Col>
              <Col span={20}>
                <DescriptionList size="large" style={{ marginTop: 10 }}>
                  <Description term="备件名称">{detaildata.attaName}</Description>
                  <Description term="备件编号">{detaildata.attaCode}</Description>
                  <Description term="设备类型">{detaildata.attaType && attaType[parseInt(detaildata.attaType)-1]}</Description>
                  <Description term="型号">{detaildata.modelNum}</Description>
                  <Description term="参数">{detaildata.attaParam}</Description>
                  <Description term="品牌">{detaildata.trademark}</Description>
                  <Description term="供货商">{detaildata.supplier}</Description>
                  <Description term="保养周期">{detaildata.maintainPeriod}</Description>
                  <Description term="设备寿命">{detaildata.attaLife && attaLife[parseInt(detaildata.attaLife)-1]}</Description>
                  <Description term="备注">{detaildata.remarks}</Description>
                  <Description term="设备资料" >{
                    detaildata.attaDatum && detaildata.attaDatum.length>0 &&
                    <Upload
                      disabled={true}
                      defaultFileList={detaildata.attaDatum.map(item=>{
                        item.url = baseUrl + item.url;
                        return item;
                      })}
                    />
                  }</Description>
                </DescriptionList>
              </Col>
            </Row>
          </Card>
        }
      </Fragment>
    );
  }
}
